<template>
  <div class="app-container home">
    <div class="card-row">
      <el-card class="card-item">
        <template #header>
          <div class="card-header">
            <span>技师前5名</span>
          </div>
        </template>
        <div style="height: 300px" id="technicianChart"></div>
      </el-card>
      <el-card class="card-item">
        <template #header>
          <div class="card-header">
            <span>套餐服务前五</span>
          </div>
        </template>
        <div style="height: 300px" id="setmenuChart"></div>
      </el-card>
      <el-card class="card-item">
        <template #header>
          <div class="card-header">
            <span>待服务订单</span>
            <div class="more" @click="more">
              <span>更多</span>
              <el-icon>
                <ArrowRightBold />
              </el-icon>
            </div>
          </div>
        </template>
        <div>
          <ul class="order-list">
            <li class="order-item th">
              <span class="bh">订单编号</span>
              <span class="js">技师</span>
              <span class="tc">套餐</span>
              <span class="price">套餐金额</span>
              <span class="operate" style="color: #333;">操作</span>
            </li>
            <li class="order-item" v-for="item in waitingServiceData">
              <span class="bh" :title="item.orderNo">{{ item.orderNo }}</span>
              <span class="js"  :title="item.userName" >{{ item.userName }}</span>
              <span class="tc" :title="item.serviceName">{{ item.serviceName }}</span>
              <span class="price">￥{{ item.orderPrice }}</span>
              <span class="operate" @click="handleUpdateHx(item)">核销</span>
            </li>
          </ul>
        </div>
      </el-card>
    </div>

    <el-card class="card-chart">
      <template #header>
        <div class="card-header">
          <span>日常分析</span>
          <el-radio-group v-model="tabPosition" style="">
            <el-radio-button value="1">近一周</el-radio-button>
            <el-radio-button value="2">近一个月</el-radio-button>
            <el-radio-button value="3">本年</el-radio-button>
          </el-radio-group>
        </div>
      </template>
      <div>
        <div style="height: 440px" id="SalesAnalysis"></div>
      </div>
    </el-card>
    <!-- 订单核销修改订单对话框 -->
    <el-dialog :title="dialogHx.title" v-model="dialogHx.visible" width="500px" append-to-body>
      <el-form ref="orderFormRef" :model="form"  label-width="80px">
        <el-form-item label="核销码" prop="verificationCode">
          <el-input v-model="form.verificationCode" placeholder="请输入核销码" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitFormHx">确 定</el-button>
          <el-button @click="cancelHx">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { rankingList, servicePageList, waitingService, orderDataStatistics } from '@/api/index';
import { verificationCode } from '@/api/system/order';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const tabPosition = ref<any>(1)
// 更新图表数据
const orderDataStatisticsData = ref<any>([])
const updateChartData = async () => {
  const chartDom = document.getElementById('SalesAnalysis');
  if (!chartDom) return;

  const myChart = echarts.init(chartDom);

  const res = await orderDataStatistics({
    statistics: tabPosition.value
  })
  if (res.code == 200) {
    orderDataStatisticsData.value = res.data
  }
  let currentData = orderDataStatisticsData.value;

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: ['订单数量', '销售金额']
    },
    xAxis: [
      {
        type: 'category',
        data: currentData.dates,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '订单数量',
        min: 0,
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        name: '销售金额',
        min: 0,
        axisLabel: {
          formatter: '{value}元'
        }
      }
    ],
    series: [
      {
        name: '订单数量',
        type: 'bar',
        barWidth: '20',  // 设置柱体宽度为20%
        data: currentData.orders,
        itemStyle: {
          color: '#409EFF'
        }
      },
      {
        name: '销售金额',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        data: currentData.amount,
        itemStyle: {
          color: '#67C23A'
        }
      }
    ]
  };

  myChart.setOption(option);
}

// 监听时间周期变化
watch(tabPosition, () => {
  updateChartData();
});

onMounted(() => {
  getRankingList()
  getservicePageList()
  getwaitingService()



  // 初始化销售分析图表
  updateChartData();
});
const rankingListData = ref<any>([])
const getRankingList = async () => {
  const res = await rankingList()
  if (res.code == 200) {
    rankingListData.value = res.data
  }
  // 初始化技师图表
  const technicianChartDom = document.getElementById('technicianChart');
  if (technicianChartDom) {
    const technicianChart = echarts.init(technicianChartDom);
    const technicianOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '接单量',
          type: 'pie',
          radius: '50%',
          data: rankingListData.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    technicianChart.setOption(technicianOption);
  }
}
const servicePageListData = ref<any>([])
const getservicePageList = async () => {
  const res = await servicePageList()
  if (res.code == 200) {
    servicePageListData.value = res.data
  }
  // 初始化套餐销售量图表
  const setmenuChartDom = document.getElementById('setmenuChart');
  if (setmenuChartDom) {
    const setmenuChart = echarts.init(setmenuChartDom);
    const setmenuOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '销售量',
          type: 'pie',
          radius: '50%',
          data: servicePageListData.value,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    setmenuChart.setOption(setmenuOption);
  }
}

const waitingServiceData = ref<any>([])
const getwaitingService = async () => {
  const res = await waitingService()
  if (res.code == 200) {
    waitingServiceData.value = res.data
  }
}


const dialogHx = reactive<DialogOption>({
  visible: false,
  title: ''
});
const orderFormRef = ref<ElFormInstance>();
const form = ref<any>({
  verificationCode: '',
  remark: ''
});
const buttonLoading = ref(false);
/** 核销按钮操作 */
const handleUpdateHx = async (row: any) => {
  reset();
  const _orderId = row?.orderId
  form.value.orderId = _orderId
  dialogHx.visible = true;
  dialogHx.title = "订单核销";
}
/** 取消核销按钮 */
const cancelHx = () => {
  reset();
  dialogHx.visible = false;
  
}
/** 核销提交按钮 */
const submitFormHx = async () => {
  buttonLoading.value = true;
  await verificationCode(form.value).finally(() => buttonLoading.value = false);
  proxy?.$modal.msgSuccess("核销成功");
  dialogHx.visible = false;
}
/** 表单重置 */
const reset = () => {
  form.value = {
    verificationCode: '',
    remark: ''
  };
  orderFormRef.value?.resetFields();
}


const more=()=>{
  proxy?.$router.push({ path: '/order/order' });
}


</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .more {
    display: flex;
    align-items: center;
  }

}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans',
  'Helvetica Neue',
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.card-row {
  display: flex;
  justify-content: space-around;

  .card-item {
    width: 32%;
  }
}

.card-chart {
  width: 99%;
  margin: 20px auto;
}

.order-list {
  width: 100%;
  max-height: 294px;
  overflow-y: scroll;

  .order-item {
    border-bottom: 1px solid #f1f1f1;
    padding: 10px 0;
  }

  .th {
    font-weight: bold;

  }

  .order-item {
    display: flex;
    align-items: center;
    text-align: center;

    span {
      min-width: 20%;
      overflow: hidden;
      cursor: pointer;
      word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical;
    /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1;
    /** 显示的行数 **/
    overflow: hidden;
    /** 隐藏超出的内容 **/
    }
    // .bh{
    //   overflow: hidden;
    //   cursor: pointer;
    //   word-break: break-all;
    // text-overflow: ellipsis;
    // display: -webkit-box;
    // /** 对象作为伸缩盒子模型显示 **/
    // -webkit-box-orient: vertical;
    // /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    // -webkit-line-clamp: 1;
    // /** 显示的行数 **/
    // overflow: hidden;
    // /** 隐藏超出的内容 **/
    // }

    .operate {
      width: 10%;
      // color: blue;
      cursor: pointer;
      color: #007bff;
    }

    .price {
      width: 10%;
    }

    .js {
      width: 30%;
    }

    .tc {
      width: 30%;
    }
  }
}
</style>